<template>
    <view class="user-card">
      <image class="avatar" :src="userInfo.avatar" />
      <view class="user-info">
        <view class="user-name">{{ userInfo.name }}</view>
        <view class="user-id">就诊卡: {{ userInfo.cardMasked }}</view>
      </view>
      <view class="switch-user" @click="$emit('switch-user')">
        <image class="switch-icon" src="/static/images/icon/switchUser-icon.png" />
        <view style="font-size: 25rpx;">切换就诊人</view>
      </view>
    </view>
</template>

<script>
export default {
  props:{
    userInfo: {
      type: Object,
      default: () => {}
    },
  }
}
</script>

<style lang="scss" scoped>
.user-card {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
  border-radius: 16rpx 16rpx 0 0;
  padding: 32rpx 40rpx 24rpx;
  position: relative;
}
.avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}
.user-info {
  flex: 1;
  margin-bottom: 10rpx;
}
.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.user-id {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}
.switch-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6rpx;
  color: #1ec6e6;
  font-size: 24rpx;
}
.switch-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 8rpx;
}
</style>